<template>
    <div>
        <!-- <div class="title text-6 mb-8">我的</div> -->
        <div class="w-full flex items-center p-4 rounded-5 bg-blue-50">
            <el-avatar
                :size="80"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            >
                user
            </el-avatar>
            <div class="ml-8 text-5">{{ user.name }}</div>
        </div>
        <div class="my-8 w-full">
            <el-descriptions :column="1" size="large" border>
                <el-descriptions-item label="姓名">{{
                    user.name
                }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{
                    user.gender
                }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{
                    user.phone
                }}</el-descriptions-item>
                <el-descriptions-item label="车牌号">
                    <el-tag
                        v-for="item in user.cars"
                        :key="item"
                        class="mr-2"
                        type="info"
                        >{{ item.carNum }}</el-tag
                    >
                </el-descriptions-item>
                <el-descriptions-item label="车位号">
                    <div v-if="user.parkName">{{
                        user.parkName + ' ' + user.parkSpaceNumber
                    }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="到期时间">
                    <el-tag
                        v-if="user.expireTime"
                        :type="
                            dayjs(user.expireTime).isBefore(dayjs())
                                ? 'danger'
                                : 'info'
                        "
                    >
                        {{ dateFromat(user.expireTime) }}
                    </el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="my-8 text-5 w-full flex flex-col">
            <el-button
                type="warning"
                class="mb-6"
                size="large"
                @click="router.push('/m/profile')"
                >编辑个人信息</el-button
            >
            <el-button
                type="primary"
                class="mb-6 !ml-0"
                size="large"
                @click="router.push('/m/buy-park-space')"
                >购买车位</el-button
            >
            <el-button
                type="primary"
                class="mb-6 !ml-0"
                size="large"
                @click="handleLogout"
                >退出登录</el-button
            >
        </div>
    </div>
</template>

<script setup lang="ts">
import { getOwnerByIdApi } from '@/apis/owner'
import { dateFromat } from '@/utils/dateFormat'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

const router = useRouter()

// 用户信息
const user = ref<any>({})

// 获取用户信息
const getData = async () => {
    const { id } = JSON.parse(localStorage.getItem('user')) as any
    const res = await getOwnerByIdApi(id)
    if (res) {
        user.value = res
    }
}
getData()

// 退出登录
const handleLogout = () => {
    localStorage.removeItem('user')
    location.reload()
}
</script>

<style scoped></style>
